<template>
  <!-- 定义一个表格，用于显示数据 -->
  <el-table :data="tableData" style="width: 100%">
    <!-- 定义表格的列，显示名称 -->
    <el-table-column prop="name" label="Name" width="180" />
    <!-- 定义一个固定在右侧的列，显示操作按钮 -->
    <el-table-column fixed="right" label="Operations" min-width="120">
      <!-- 使用作用域插槽，为每个操作按钮绑定点击事件 -->
      <template #default="scope">
        <!-- 点击'资源配置'按钮时，调用handleClick函数，并传入当前行的id -->
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
          资源配置
        </el-button>
        <!-- 点击'修改'按钮时，可能触发修改操作 -->
        <el-button link type="primary" size="small" @click="handleClick+editResource">修改</el-button>
        <!-- 点击'删除'按钮时，可能触发删除操作 -->
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 定义一个对话框，用于显示穿梭框 -->
  <el-dialog
    v-model="dialogVisible"
    title="权限列表"
    width="700"
    height="500"
  >
    <!-- 使用el-transfer组件作为穿梭框 -->
    <el-transfer v-model="value" :data="data" />
    <!-- 定义对话框的底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <!-- 点击'取消'按钮，关闭对话框 -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <!-- 点击'提交'按钮，调用setresource函数 -->
        <el-button type="primary" @click="setresource">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
// 导入http模块，用于发送http请求
import http from "../http";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

// 定义表格数据的响应式引用
const tableData = ref([])
// 定义对话框显示状态的响应式引用
const dialogVisible = ref(false)

// 定义选中资源值的数据的响应式引用
const value = ref([])
// 定义角色ID的响应式引用
const roleid = ref(0)

// interface Option {
//    id: number
//    name: string
// }
// 左侧所有资源数据的响应式引用
const data = ref([])

// 定义获取角色列表的函数
const getrlist = () => {
  http.get('role/').then(res => {
    // 将获取到的数据赋值给tableData
    tableData.value = res.data
  })
  // tableData.value = [{"id":1,'name':'项目经理'},{"id":2,'name':'程序员'}]
}

// 定义点击“资源配置”按钮时的处理函数
const handleClick = (rid) => {
  // 保存roleid
  roleid.value = rid
  // 获取全部资源以及此角色已经配制过的资源
  http.get('resource/?roleid=' + roleid.value).then(res => {
    data.value = res.data.reslist
    value.value = res.data.checklist
    console.log(1111111,value.value,res.data)
    // 显示穿梭框
    dialogVisible.value = true
  })
}

// 定义点击“修改”按钮时的处理函数
const editResource = () => {
    // 保存roleid
    roleid.value = rid; // 确保 rid 是从正确的地方获取的
    // 获取全部资源以及此角色已经配制过的资源
    http.get('resource/?roleid=' + roleid.value).then(res => {
    console.log(222222222,res.data)

        //
        // data.value = res.data.reslist; // 全部资源列表
        // value.value = res.data.checkedids; // 已分配资源的ID列表
        console.log(value.value);
        // 显示穿梭框
        dialogVisible.value = true; // 确保对话框可见
    });
};

const setresource = () => {
  // 检查dialogVisible状态，如果对话框是打开的，则发送数据
  if (dialogVisible.value) {
    const checkedids = value.value;
    console.log(checkedids);
    const payload = {
      roleid: roleid.value,
      checkedids: checkedids
    };
    // 发送数据到后端
    http.post('resource/?roleid=' + roleid.value, payload).then(response => {
      console.log('提交成功', response.data);
      // 关闭对话框
      dialogVisible.value = false;
      // 重新获取角色列表以更新tableData
      getrlist();
    }).catch(error => {
      console.error('提交失败', error);
    });
  }
}

onMounted(() => {
  getrlist()
})
</script>